<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABC</title>
<link rel="stylesheet" type="text/css" href="styles/base.css"/>
<link rel="stylesheet" type="text/css" href="styles/global.css"/>
<style type="text/css">
#mini-slider {
	position:relative;
	width:940px;
	margin:0 auto;
	background: none repeat scroll 0 0 #fff; 
}
.mini-slider-nav {
	height:20px;
	margin:0 200px;
}
.mini-slider-captions {
	height:300px;
	width:940px;
	overflow: hidden;
	position: relative; 
}
.mini-slider-nav-ul{
	text-align:center;
	height:20px;
	display:block;
}
.mini-slider-nav-ul li{
	float:left;
	display:none;
	line-height:20px;
	text-align:center;
	cursor:pointer;
}
.mini-slider-nav-ul li.active{
	font-weight:bold;
	color:#961001;
	cursor:default;
}
.mini-slider-notch{
	background:url(images/sprites/sprite_gift.png) no-repeat 0 -189px;
	width:300px;
	height:10px;
	display:none;
	position:absolute;
	z-index:10;
	top:19px;
}
</style>
</head>
<body> 
	<div id="mini-slider" class="mini-slider">
		<nav class="mini-slider-nav">
			<ul class="mini-slider-nav-ul">
				<li>dome1</li>
				<li>dome2</li>
			</ul>
		</nav>
		<div class="mini-slider-notch"></div>
		<div class="mini-slider-captions">
			<div  class="mini-slider-item"><img src="images/cms/demo1.jpg" alt="" /></div>
			<div class="mini-slider-item"><img src="images/cms/demo2.jpg" alt="" /></div>
		</div>
	</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script>
	(function($){
		function MiniSlider(elem,config){
			var defConfig = {
				notchTimes : 300,
				sliderTimes : 500
			};
			this.conf = $.extend({}, defConfig, config);
			this.element = $('#'+elem);
			this._init();
		};
		MiniSlider.prototype = {
			_init : function(){
				this.nav = $('.mini-slider-nav',this.element);
				this.tabs = $('li',this.element);
				this.captions = $('.mini-slider-item',this.element);
				this.notch = $('.mini-slider-notch',this.element);
				
				this.currentIndex = -1;
				this.tabWidth = Math.floor(this.nav.innerWidth() / this.tabs.length);
				this.tabs.css({'width':this.tabWidth,'display':'block'}); 
				this.notchWidth = this.notch.width();
				this._attachEvent();
			},
			_attachEvent : function(){
				var self = this;
				this.tabs.each(function(index,item){
					var oItem = $(item);
					(function(i,el){
						el.bind('click',function(e){
							self.viewSlide(i);
						});
					})(index,oItem);
				});
			},
			viewSlide : function(index){
				var self = this;
				if(self.currentIndex == index){
					return;
				}
				self.currentIndex = index;
				self.tabs.each(function(j,item){
					var oItem = $(item);
					oItem.removeClass('active');
					if(j==index){
						oItem.addClass('active');
						var offsetLeft = oItem.context.offsetLeft,
							notchLeft = offsetLeft - Math.floor((self.notchWidth - self.tabWidth)/2);
						if(self.notch.css('display') == 'none'){
							self.notch.css('left',notchLeft);
							self.notch.show();
						}else{
							self.notch.animate({'left': notchLeft}, 200,null)
						}
					}
				});
				self.captions.each(function(j,item){
					var oItem = $(item);
					if(oItem.css('display') == 'block'){
						oItem.css('display','none')
						oItem.css('opacity',0) 
					}
					if(index == j){
						oItem.css('display','block') 
						$(item).animate({
							opacity: 1
						}, 500, null);
					}
				});
			}
		};
		new MiniSlider('mini-slider',null);
	})(jQuery);
</script>
</body>
</html>
